
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import React, { Fragment, useState ,useEffect} from 'react'
import { Select } from 'antd'
import { profit_loss, member_api_list } from "@/apis/user.js"
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn';
import {Toast } from 'antd-mobile'
import { ItemChildrenWrap } from 'antd-mobile/es/components/dropdown/item';
dayjs.locale('zh-cn'); 

const Profitlist = (props) => {

	const navigate = useNavigate()
	const [selecttime,setselecttime]=useState(0)
	const [starttime, setStarttime] = useState(dayjs().format('YYYY-MM-DD'));
	const [endtime,setendtime]= useState(dayjs().format('YYYY-MM-DD'));
	const dateFormat = 'YYYY-MM-DD';
	
	const [gameid,setgameid] = useState(0)
	const [data,setData]=useState([])
	const [list,setlist]=useState([])
	const [page, setPage] = useState(1)
	const { t } = useTranslation();

	const changeTab=(current)=>{
		let today = new Date();
	
		if(current == 0){
			let yesterday = new Date(today);
			yesterday.setDate(today.getDate() - 0);
			setendtime(dayjs())
			setStarttime(dayjs())
			//getAdapter()
		}
		if(current == 1){
			let yesterday = new Date(today);
			yesterday.setDate(today.getDate() - 1);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(1, 'day'))
			//getAdapter()
		}
		if(current == 2){
			let sevenDaysAgo = new Date(today);
			let yesterday = new Date(today);
			sevenDaysAgo.setDate(today.getDate() - 7);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(7, 'day'))
			//getAdapter()
		}
		if(current == 3){
			let thirtyDaysAgo = new Date(today);
			let yesterday = new Date(today);
			thirtyDaysAgo.setDate(today.getDate() - 30);
			setendtime(dayjs())
			setStarttime(dayjs().subtract(30, 'day'))
			//getAdapter()
		}
		setselecttime(current) 
	}
	useEffect(() => {

		getAdapter()
		//getapilist()
		return ()=>{}
	  }, [selecttime,gameid]);
	const handleChange=(value)=>{
		setgameid(value)
	}
	
	const getAdapter = ()=>{
		Toast.show({
			icon: 'loading',
			content: t('login.title53'),
		})
		profit_loss(
			{
				start_time:formatDate(starttime),
				end_time:formatDate(endtime),
				api_id:gameid
			}
		).then(res => {
			if (res.status.errorCode == 0){
				setData(res.data)
				Toast.clear()
			}
		})

	}
	const getapilist = ()=>{
		member_api_list().then(res => {
			if (res.status.errorCode == 0){
				res.data.forEach((item)=>{
					item.label = item.api_name,
					item.value = item.id
				})
				setlist(res.data)
			}  
		})
	}
	
	const formatDate = (dater) => {
		const dateString = dater;
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
		return formattedDate
	}
	
	useEffect(() => {
		if (window.scrollTo) {
		  window.scrollTo(0, 0);
		} else if (document.body.scrollTop) {
		  document.body.scrollTop = 0;
		} else {
		  document.documentElement.scrollTop = 0;
		}
		getAdapter()
		getapilist()
		return ()=>{}
	  }, []);

	return (
		<React.Fragment>
			<HeaderTitle title={t('profitloss.title1')} right_title={t('agent.title2')}/>
			<div className={style['main']}>
				<div className={style['header_group']}>
					<div className={style['time_group']}>
						<div className={`${style['tgitem']} ${selecttime === 0 ? style['active'] : ''}`} onClick={()=>{changeTab(0)}}>{t('profitloss.title2')}</div>
						<div className={`${style['tgitem']} ${selecttime === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>{t('profitloss.title3')}</div>
						<div className={`${style['tgitem']} ${selecttime === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>{t('profitloss.title4')}</div>
						<div className={`${style['tgitem']} ${selecttime === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>{t('profitloss.title5')}</div>
					</div>
					<div className="game_group">
						<Select
						  defaultValue={t('profitloss.title6')}
						  style={{ width: '100%',height: '34px' }}
						  onChange={(e)=>handleChange(e)}
						  options={list}
						/>
					</div>
				</div>
				<div className={style['content_group']}>
					<div className={style['main_content']}>
						<div className={style['header_group_bg']}>
							<div className={style['header_group_content']}>
								<div className={style['total_profit_loss']}>
									<span>{t('profitloss.title11')}</span>
									<span className={style['green']}>{data.netAmount || '0'}</span>
								</div>
								<div className={style['avatar']}>
									<div className={style['avatar_bg']}></div>
								</div>
								<div className={style['total_profit_loss']}>
									<span>{t('profitloss.title12')}</span>
									<span>{data.money || '0'}</span>
								</div>
							</div>
							<div className={style['txt_group']}>{t('profitloss.title13')}</div>
						</div>
						{/*<div className={style['Recharge_group']}>
							<div className={style['rechargeBox']}>
								<div className={style['rechargeBoxitem']} onClick={() => navigate('/rechargeorder')}>
									<div className={style['recharge_icon']}></div>
									<div>{t('profitloss.title14')}</div>
								</div>
								<div className={style['rechargeBoxitem']} onClick={() => navigate('/withdraw')}>
									<div className={style['withdraw_icon']}></div>
									<div>{t('profitloss.title15')}</div>
								</div>
							</div>
						</div>*/}
						<div className={style['txt_recharge_group']}>
							<div className={style['rechargegroupitem']}>
								<span>{t('profitloss.title16')}</span>
								<span className={style['txt_coin']}>{data.recharge || '0'}</span>
							</div>
							<div className={style['rechargegroupitem']}>
								<span>{t('profitloss.title17')}</span>
								<span className={style['txt_coin']}>{data.drawing || '0'}</span>
							</div>
						</div>
						<div className={style['icon_group']}>
							<div className={style['DataGroup']}>
								<div className={style['DataGroupItem']}>
									<span>{t('profitloss.title18')}</span>
									<span className={style['txt_coin']}>{data.betAmount || '0'}</span>
								</div>
								<div className={style['DataGroupItem']}>
									<span>{t('profitloss.title19')}</span>
									<span className={style['txt_coin']}>{data.netAmount || '0'}</span>
								</div>
								<div className={style['DataGroupItem']}>
									<span>{t('profitloss.title20')}</span>
									<span className={style['txt_coin']}>{data.dividend || '0'}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</React.Fragment>
	)
}


export default Profitlist
